<template>
  <div class="page-detail">
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24">
        <crumbs :keyword="keyword" :type="type" />
      </el-col>
    </el-row>
    <!-- 商品数据 -->
    <el-row>
      <el-col :span="24">
        <summa :product="product" />
      </el-col>
    </el-row>
    <!-- 商品列表 -->
    <el-row class="m-title">
      <el-col :span="24">
        <h3>商家团购及优惠</h3>
      </el-col>
    </el-row>
    <el-row v-if="list.length || !login">
      <el-col :span="24">
        <list v-if="login" :list="list" />
        <div v-else class="deal-need-login">
          <img
            src="//p0.meituan.net/codeman/56a7d5abcb5ce3d90fc91195e5b5856911194.png"
            alt="登录查看"
          >
          <span>请登录后查看详细团购优惠</span>
          <el-button type="primary" round>
            <a href="/login">立即登录</a>
          </el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import cookies from 'vue-cookies'
import Crumbs from '@/components/detail/crumbs.vue'
import Summa from '@/components/detail/summary.vue'
import List from '@/components/detail/list.vue'
export default {
  components: {
    Crumbs,
    Summa,
    List
  },
  data () {
    return {
      list: [],
      keyword: '',
      type: '',
      product: {},
      login: false
    }
  },
  watch: {
    $route () {
      this.getData()
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      const city = cookies.get('city') ? cookies.get('city') : this.$store.state.geo.position.city
      const params = location.href.split('?')[1].split('&')
      this.keyword = decodeURIComponent(params[0].split('=')[1])
      this.type = decodeURIComponent(params[1].split('=')[1])
      const { status, data: { product, more: list, login } } = await this.$axios.get('/search/products', {
        params: {
          keyword: this.keyword,
          type: this.type,
          city
        }
      })
      if (status === 200) {
        this.product = {
          rating: product.biz_ext.rating,
          nmae: product.name,
          cost: product.biz_ext.cost,
          address: product.address,
          tel: product.tel,
          location: product.location,
          photos: product.photos
        }
        this.list = list
        this.login = login
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/assets/css/detail/index.scss';
</style>
